<template>
  <div class="box">
    <div class="left-img">
      <img src="../../../public/img/白玫瑰.jpg" alt />
    </div>
    <div class="right">
      <p>捆扎白玫瑰一束</p>
      <span>价格</span>
      <span>66.00</span><br>
      <span>总价:</span><span>$66.00</span><br>
      <input type="button" value="-" class="btn" />
      <input type="text" class="inp" />
      <input type="button" value="+" class="btn"/>
      <hr>
      <button>确认购买</button>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  width: 80%;
  margin: auto;
  border: 1px solid red;
  
}
.left-img {
  display: inline-block;
  margin-left: -5px;
}
.right {
    display: inline-block;
    margin-left: 10px;
    width: 440px;
    height: 320px;
    border: 1px solid gold;
}
.right p{
    padding: 0;
    margin: 10px;
   line-height: 30px;
}
.right span{
    
    margin-bottom: 10px;
}
.inp{
    height: 26px;
    width: 100px;
}
.btn {
    width: 30px;
    height: 30px;
}
</style>